<template>
    <a-spin :spinning="spinning" :tip="'加载中'" :delay="300">
        <div class="main_left_article">
            <div v-for="(item,index) in articleList" :key="item.id">
                <div v-if="item.type===1" class="main_left_article_item">
                    <router-link :to="{
            path: '/articleDetails',
            query: {
              articleId:item.id
            }
          }">
                        <div class="main_left_a rticle_item_title" v-dompurify-html="item.title"></div>
                    </router-link>

                    <div class="main_left_article_item_label">
                        <div v-for="(item2,index) in item.labels" :key="index">
                            <a-button @click="labelSearch(item2)"
                                      v-dompurify-html="item2"
                                      class="main_left_article_item_label_item"
                                      type="primary" size="small"
                                      ghost></a-button>
                        </div>
                    </div>
                    <div class="main_left_article_item_3">
                        <div class="main_left_article_item_3_type">{{ item.gradeTranslation }}</div>
                        <div class="main_left_article_item_3_author">{{ item.user.nickname }}</div>
                    </div>
                </div>
            </div>
        </div>
    </a-spin>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {
    searchArticle
} from "@/api/home/article";
import {Article} from "@/model/home/article";
import cookie from 'js-cookie'
import Publish from 'pubsub-js'

//是否显示加载中
const spinning = ref<boolean>(true);

//文章列表
const articleList = ref<Article[]>([])

//获取文章列表
const handleArticleList = async () => {
    if (requestParams.value.key == null) {
        requestParams.value.key = cookie.get("key")
    }
    requestParams.value.sortBy = 'id'
    const res = await searchArticle(requestParams.value)
    cookie.remove("key")
    articleList.value = res.data.data.pageResult.articles
    articleList.value.map(item => {
        item.labels = item.labelTranslation.split(",")
    })
}

//全文检索所需的参数
const requestParams = ref<RequestParams>({
    key: '',
    page: 1,
    size: 10,
    sortBy: ''
})

handleArticleList()
</script>

请将这段vue3+ts代码改成react18+ts代码